<template>
	<el-upload class="avatar-uploader" action="http://127.0.0.1:4890/portal/admin/file/uploadImage"
		:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" >
		<el-image v-if="imageUrl" :src="imageUrl" class="avatar" fit="contain"/>
		<i v-else class="el-icon-plus avatar-uploader-icon" />
		<template #tip>
			<div class="el-upload__tip">
				<li>1. 仅支持图片类型文件，包含 jpg/png 格式文件。</li>
				<li>2. 单个文件上传限定 10MB 以内。</li>
			</div>
		</template>
	</el-upload>
	<!-- <el-upload class="upload-demo" action="http://127.0.0.1:4890/portal/admin/file/uploadImage"
		:on-preview="func_handleContentPicPreview" :on-remove="func_handleContentPicRemove"
		:on-success="func_handleContentPicsSuccess" :file-list="fileList"
		list-type="picture-card">
		<i class="el-icon-plus" ></i>
		<template #tip>
			<div class="el-upload__tip">
				<li>1. 仅支持图片类型文件，包含 jpg/png 格式文件。</li>
				<li>2. 单个文件上传限定 4MB 以内。</li>
			</div>
		</template>
	</el-upload> -->
	 <el-divider />
</template>

<script>

import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";

export default {
    name: "avatar",
    components: {},
	props:{
		selectValue: Object
	},
	emits: ['avatar'],
	setup(props, cex){
		onMounted(() => {
		});
		const imageUrl = ref('');
        // =========================================================================================
		// 主业务处理 ========================================================================================= START
        const handleAvatarSuccess = (res, file) => {
            if(file.response.code != 200) {
                if(res.type == 0) {
                    ElMessage.warning(res.data.msg);
                } else {
                    ElMessage.error(res.data.msg);
                }
            } else {
                var uploadFile = URL.createObjectURL(file.raw);
				imageUrl.value = file.response.data.imgUrl;
				cex.emit('avatar',  {state: 1,  imgUrl: file.response.data.imgUrl,});
                ElMessage.success("上传成功");
            }
        };
        const beforeAvatarUpload = (file) => {
            const isJPG = file.type === 'image/jpeg';
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isJPG) {
                ElMessage.warning('上传图片只能是 JPG 格式!');
            };
            if (!isLt10M) {
                ElMessage.warning('上传图片大小不能超过 10MB!');
            }
            return isJPG && isLt10M;
        };
        // =========================================================================================================
        // 业务数据监听
        watch(() => props.selectValue, (val) => {
        },{deep: true, immediate: true});
        return {
            imageUrl, beforeAvatarUpload, handleAvatarSuccess,
        };
	},
};
</script>

<style>
.avatar {
	width: 300px;
	height: 300px;
	display: block;
	align: center;
}
.avatar-uploader .avatar {
	width: 300px;
	height: 300px;
	display: block;
	align: center;
}

.avatar-uploader .el-upload {
	border: 1px dashed #CCCCCC;
	width: 300px;
	height: 300px;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 300px;
	height: 300px;
	line-height: 300px;
	text-align: center;
}
</style>
